<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<style>
			/* 练习：1圆形 2.正三角形
			 思路1：宽高与边框倒角一致
			 思路2：div#triangle   
			           css中：抓到div   【斜线】
					         左边框：50像素实线红色
			                 右边框：50像素实线黄色
			                 下边框：50像素实线黑色
			    注意：先别加宽高  transparent 透明色
			*/
		   div#circle{
			   width: 400px;
			   height: 400px;
			   border: 1px solid red;
			   border-radius: 50%;
			    /* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 100px 50px red;
		   }
		   div#triangle{
			   width: 0;
			  /*border-left: 50px solid transparent;
			  border-right: 50px solid transparent;
			  border-bottom: 50px solid black;*/
			  /*border: 50px solid transparent;
			  border-right-color: rgba(0, 0, 0, 1);*/
			  /* 两行：倒三角，蓝色，透明度 .3 
			  提醒：所有边框：50px solid transparent
			        上边框颜色改为蓝色 0，0，255*/
					border: 50px solid transparent;
					border-top-color: rgba(0, 0, 255, .3);
		   }
		   /* outline  边框轮廓  只针对input 元素*/
		   input{
			   outline: 1px solid red;
		   }
		        /* 实际应用：通配选择器 去掉轮廓
				 *{ outline: 0;}
				 */
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>